import { Popconfirm, Space, TableColumnsType, Tag, Tooltip, Typography, Image, Badge, Table } from 'antd'
import { NavigateFunction } from 'react-router-dom'
import type { ITableData } from './types'
import { BadgeColorMap, BadgeColorDeliveryMap, DIS_STATUSBANDBTNTEXT, STATUSBAND, USERTYPETEXT } from '@/constant'
import { getImageByUrl } from '@/utils/getImageByUrl'
import { CONTRACT_STATUS_TEXT, ORDER_CONTRACT_STATUS_TEXT, ORDER_STATUS_TEXT } from '@/constant/purchase'
import { QuestionCircleOutlined, RetweetOutlined } from '@ant-design/icons'
import { formatNumber } from '@/utils/util'
import * as mathjs from 'mathjs'
const DataTypeMap: Record<string, string> = { SPU: '款', SKC: '色', SKC_CUP: '杯型', SKU: '尺码' }
export const useIndexColumns = ({
  onViewSpuInfo,
  onViewHisInfo,
  onViewProcessInfo,
  isShowCup,
  navigate,
  dataType,
  ondataTypeChange,
}: {
  onViewSpuInfo: (info: ITableData) => void
  onViewHisInfo: (info: ITableData) => void
  onViewProcessInfo: (info: ITableData) => void
  isShowCup: boolean
  navigate: NavigateFunction
  dataType: 1 | 2
  ondataTypeChange: () => void
}): TableColumnsType<ITableData> => [
  {
    title: '商品基础信息',
    align: 'center',
    children: [
      {
        title: (
          <div>
            <div>数据</div>
            <div>层级</div>
          </div>
        ),
        dataIndex: 'productDataType',
        key: 'productDataType',
        align: 'center',
        fixed: 'left',
        width: 60,
        ellipsis: {
          showTitle: false,
        },
        render: (info) => {
          return (
            <Tooltip placement="topLeft" title={info}>
              {DataTypeMap[info] || '-'}
            </Tooltip>
          )
        },
      },
      {
        title: '大类',
        dataIndex: 'largeClassName',
        key: 'largeClassName',
        align: 'center',
        fixed: 'left',
        width: 60,
        ellipsis: {
          showTitle: false,
        },
        render: (info) => {
          return info ? (
            <Tooltip placement="topLeft" title={info}>
              {info || '-'}
            </Tooltip>
          ) : (
            '-'
          )
        },
      },
      {
        title: '中类',
        dataIndex: 'midClassName',
        key: 'midClassName',
        align: 'center',
        fixed: 'left',
        width: 40,
        ellipsis: {
          showTitle: false,
        },
        render: (info) => {
          return info ? (
            <Tooltip placement="topLeft" title={info}>
              {info || '-'}
            </Tooltip>
          ) : (
            '-'
          )
        },
      },
      {
        title: '小类',
        dataIndex: 'smallClassName',
        key: 'smallClassName',
        align: 'center',
        fixed: 'left',
        width: 60,
        ellipsis: {
          showTitle: false,
        },
        render: (info) => {
          return info ? (
            <Tooltip placement="topLeft" title={info}>
              {info || '-'}
            </Tooltip>
          ) : (
            '-'
          )
        },
      },
      {
        title: '细类',
        dataIndex: 'fineClassName',
        key: 'fineClassName',
        align: 'center',
        fixed: 'left',
        width: 60,
        ellipsis: {
          showTitle: false,
        },
        render: (info) => {
          return info ? (
            <Tooltip placement="topLeft" title={info}>
              {info || '-'}
            </Tooltip>
          ) : (
            '-'
          )
        },
      },
      {
        title: (
          <div>
            <div>款式编码</div>
            <div>条码</div>
          </div>
        ),
        dataIndex: 'spuCode',
        key: 'spuCode',
        align: 'center',
        fixed: 'left',
        width: 110,
        ellipsis: {
          showTitle: false,
        },
        render: (info, rows) => {
          return rows?.productDataType != 'SKU' ? (
            <Tooltip placement="topLeft" title={info}>
              <Typography.Link
                ellipsis
                onClick={() => {
                  navigate('/goods/manage/detail?spuId=' + rows?.productSpuInfo?.spuId)
                }}
                style={{ paddingLeft: 12, paddingRight: 12 }}
              >
                {info}
              </Typography.Link>
            </Tooltip>
          ) : (
            <Tooltip placement="topLeft" title={rows?.skuCode || '-'}>
              {rows?.skuCode || '-'}
            </Tooltip>
          )
        },
      },
      {
        title: (
          <div>
            <div>商品</div>
            <div>名称</div>
          </div>
        ),
        dataIndex: 'productName',
        key: 'productName',
        align: 'center',
        fixed: 'left',
        width: 150,
        ellipsis: {
          showTitle: false,
        },
        render: (info) => {
          return info ? (
            <Tooltip placement="topLeft" title={info}>
              {info || '-'}
            </Tooltip>
          ) : (
            '-'
          )
        },
      },
      {
        title: (
          <div>
            <div>商品</div>
            <div>等级</div>
          </div>
        ),
        dataIndex: 'productLevelName',
        key: 'productLevelName',
        align: 'center',
        fixed: 'left',
        width: 60,
        ellipsis: {
          showTitle: false,
        },
        render: (info) => {
          return info ? (
            <Tooltip placement="topLeft" title={info}>
              {info || '-'}
            </Tooltip>
          ) : (
            '-'
          )
        },
      },
      {
        title: (
          <div>
            <div>商品</div>
            <div>图片</div>
          </div>
        ),
        dataIndex: 'picUrl',
        key: 'picUrl',
        align: 'center',
        fixed: 'left',
        width: 60,
        render: (info) => {
          return info ? (
            <Image rootClassName="suggestion_image_wrap" style={{ width: 30, height: 30 }} src={info} alt="" />
          ) : (
            '-'
          )
        },
      },
      {
        title: (
          <div>
            <div>季节</div>
            <div>分组</div>
          </div>
        ),
        dataIndex: 'seasonClassifyName',
        key: 'seasonClassifyName',
        align: 'center',
        fixed: 'left',
        width: 60,
        ellipsis: {
          showTitle: false,
        },
        render: (info) => {
          return info ? (
            <Tooltip placement="topLeft" title={info}>
              {info || '-'}
            </Tooltip>
          ) : (
            '-'
          )
        },
      },
      {
        title: (
          <div>
            <div>颜色</div>
            <div>(SKC)</div>
          </div>
        ),
        dataIndex: 'colorName',
        key: 'colorName',
        align: 'center',
        fixed: 'left',

        width: 45,
        ellipsis: {
          showTitle: false,
        },
        render: (info) => {
          return info ? (
            <Tooltip placement="topLeft" title={info}>
              {info || '-'}
            </Tooltip>
          ) : (
            '-'
          )
        },
      },
      {
        title: '杯型',
        dataIndex: 'cupType',
        key: 'cupType',
        align: 'center',
        fixed: 'left',

        width: 45,
        render: (info) => {
          return info || '-'
        },
        hidden: !isShowCup,
      },
      {
        title: (
          <div>
            <div>尺码</div>
            <div>(SKU)</div>
          </div>
        ),
        dataIndex: 'sizeName',
        key: 'sizeName',
        align: 'center',
        fixed: 'left',

        width: 45,
        ellipsis: {
          showTitle: false,
        },
        render: (info) => {
          return info ? (
            <Tooltip placement="topLeft" title={info}>
              {info || '-'}
            </Tooltip>
          ) : (
            '-'
          )
        },
      },
    ],
  },
  {
    title: '商品基础信息',
    align: 'center',
    children: [
      {
        title: (
          <div>
            <div>商品</div>
            <div>年份</div>
          </div>
        ),
        dataIndex: 'productYear',
        key: 'productYear',
        align: 'center',

        width: 60,
        render: (info) => {
          return info || '-'
        },
      },
      {
        title: (
          <div>
            <div>吊牌</div>
            <div>价</div>
          </div>
        ),
        dataIndex: 'listPriceSaleVal',
        key: 'listPriceSaleVal',
        align: 'center',

        width: 60,
        ellipsis: {
          showTitle: false,
        },
        render: (info) => {
          return info ? (
            <Tooltip placement="topLeft" title={formatNumber(info)}>
              {formatNumber(info)}
            </Tooltip>
          ) : (
            '-'
          )
        },
      },
      {
        title: (
          <div>
            <div>成本</div>
            <div>价</div>
          </div>
        ),
        dataIndex: 'costPrice',
        key: 'costPrice',
        align: 'center',

        width: 60,
        ellipsis: {
          showTitle: false,
        },
        render: (info) => {
          return info ? (
            <Tooltip placement="topLeft" title={formatNumber(info)}>
              {formatNumber(info)}
            </Tooltip>
          ) : (
            '-'
          )
        },
      },
      {
        title: (
          <div>
            <div>商品</div>
            <div>系列</div>
          </div>
        ),
        dataIndex: 'productSeries',
        key: 'productSeries',
        align: 'center',

        width: 70,
        ellipsis: {
          showTitle: false,
        },
        render: (info) => {
          return info ? (
            <Tooltip placement="topLeft" title={info}>
              {info || '-'}
            </Tooltip>
          ) : (
            '-'
          )
        },
      },
      {
        title: (
          <div>
            <div>采购</div>
            <div>渠道</div>
          </div>
        ),
        dataIndex: 'purchaseType',
        key: 'purchaseType',
        align: 'center',

        width: 60,
        ellipsis: {
          showTitle: false,
        },
        render: (info) => {
          return info ? (
            <Tooltip placement="topLeft" title={info}>
              {info || '-'}
            </Tooltip>
          ) : (
            '-'
          )
        },
      },
      {
        title: (
          <div>
            <div>畅平滞</div>
            <div>标签</div>
          </div>
        ),
        dataIndex: 'salesTag',
        key: 'salesTag',
        align: 'center',

        width: 50,
        ellipsis: {
          showTitle: false,
        },
        render: (info) => {
          return info ? (
            <Tooltip placement="topLeft" title={info}>
              {info || '-'}
            </Tooltip>
          ) : (
            '-'
          )
        },
      },
      {
        title: (
          <div>
            <div>上市</div>
            <div>日期</div>
          </div>
        ),
        dataIndex: 'onSaleDate',
        key: 'onSaleDate',
        align: 'center',

        width: 85,
        ellipsis: {
          showTitle: false,
        },
        render: (info) => {
          return info ? (
            <Tooltip placement="topLeft" title={info}>
              {info || '-'}
            </Tooltip>
          ) : (
            '-'
          )
        },
      },
      {
        title: (
          <div>
            <div>商品标</div>
            <div>签信息</div>
          </div>
        ),
        dataIndex: 'productSpuInfo',
        key: 'productSpuInfo',
        align: 'center',

        width: 50,
        ellipsis: {
          showTitle: false,
        },
        render: (_, rows) => {
          return <Typography.Link onClick={() => onViewSpuInfo(rows)}>查看</Typography.Link>
        },
      },
    ],
  },
  {
    title: '返单建议',
    align: 'center',
    children: [
      {
        title: (
          <Tooltip placement="top" title={dataType == 2 ? '点击切换至历史相似款逻辑' : '点击切换至分组逻辑'}>
            <div onClick={ondataTypeChange}>
              <div>{dataType == 2 ? '' : '历史相似'}</div>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                {dataType == 2 ? '分组数据' : '款数据'}
                <RetweetOutlined
                  style={{
                    color: 'var(--primary-color)',
                    cursor: 'pointer',
                    marginLeft: 3,
                  }}
                />
              </div>
            </div>
          </Tooltip>
        ),
        dataIndex: 's',
        key: 's',
        align: 'center',
        width: 100,
        render: (_, rows) => {
          return rows?.productDataType === 'SPU' ? (
            <Typography.Link onClick={() => onViewHisInfo(rows)}>查看</Typography.Link>
          ) : (
            '-'
          )
        },
      },
      {
        title: (
          <div>
            <div>返单推算</div>
            <div>过程</div>
          </div>
        ),
        dataIndex: 'm',
        key: 'm',
        align: 'center',
        width: 100,
        render: (_, rows) => {
          return rows?.productDataType === 'SPU' ? (
            <Typography.Link onClick={() => onViewProcessInfo(rows)}>查看</Typography.Link>
          ) : (
            '-'
          )
        },
      },
      {
        title: '起订量',
        dataIndex: 'minOrderQuantity',
        key: 'minOrderQuantity',
        align: 'center',
        width: 80,
        ellipsis: {
          showTitle: false,
        },
        render: (info, rows) => {
          return info ? (
            <Tooltip placement="topLeft" title={rows?.minOrderRemark}>
              <span style={{ marginRight: 3 }}>{formatNumber(info)}</span>
              {rows?.minOrderRemark && (
                <span>
                  <QuestionCircleOutlined />
                </span>
              )}
            </Tooltip>
          ) : (
            '-'
          )
        },
      },
      {
        title: (
          <div>
            <div>是否建议</div>
            <div>返单</div>
          </div>
        ),
        dataIndex: 'reorderFlag',
        key: 'reorderFlag',
        align: 'center',
        width: 80,
        render: (info, rows) => {
          return info ? (
            <Tooltip placement="topLeft" title={rows?.systemAdvice}>
              <span style={{ marginRight: 3 }}>{info || '-'}</span>
              {rows?.systemAdvice && (
                <span>
                  <QuestionCircleOutlined />
                </span>
              )}
            </Tooltip>
          ) : (
            '-'
          )
        },
      },
      {
        title: '销售占比',
        dataIndex: 'saleRate',
        key: 'saleRate',
        align: 'center',
        width: 80,
        render: (info) => {
          return info >= 0 && info != null ? mathjs.multiply(mathjs.bignumber(info || 0), 100).toString() + '%' : '-'
        },
      },
      {
        title: '总库存',
        dataIndex: 'inventoryNum',
        key: 'inventoryNum',
        align: 'center',
        width: 80,
        render: (info) => {
          return formatNumber(info)
        },
      },
      {
        title: (
          <Tooltip
            placement="topLeft"
            title={
              <div>
                <div>SPU系统建议返单量 = 总缺口量 / 剩余返单次数 </div>
                <div>SKC/SKU系统建议返单量 = 上一级返单后库存 * 同级销售占比 - 同级总库存 </div>
              </div>
            }
          >
            <span style={{ marginRight: 3 }}>系统建议返单量</span>
            <QuestionCircleOutlined />
          </Tooltip>
        ),
        dataIndex: 'adviceReorderNum',
        key: 'adviceReorderNum',
        align: 'center',
        width: 110,
        render: (info) => {
          return formatNumber(info)
        },
      },
      {
        title: (
          <div>
            <div>建议返单后</div>
            <div>库存</div>
          </div>
        ),
        dataIndex: 'afterReorderInventoryNum',
        key: 'afterReorderInventoryNum',
        align: 'center',
        width: 100,
        render: (info) => {
          return formatNumber(info)
        },
      },
      {
        title: (
          <Tooltip
            placement="topLeft"
            title={
              <div>
                <div>上周已下意向订单但还没正式下单的sku数量之和</div>
              </div>
            }
          >
            <span style={{ marginRight: 3 }}>上周未出正式订单量</span>
            <QuestionCircleOutlined />
          </Tooltip>
        ),
        dataIndex: 'unFinishOrderNum',
        key: 'unFinishOrderNum',
        align: 'center',
        width: 100,
        render: (info) => {
          return formatNumber(info)
        },
      },
    ],
  },
  {
    title: '企划修正返单量',
    align: 'center',
    children: [
      {
        title: (
          <div>
            <div>企划修正</div>
            <div>返单量</div>
          </div>
        ),
        dataIndex: 'amendReorderNum',
        key: 'amendReorderNum',
        align: 'center',
        width: 100,
        render: (info) => {
          return formatNumber(info)
        },
      },
      {
        title: (
          <div>
            <div>扩渗透</div>
            <div>门店数</div>
          </div>
        ),
        dataIndex: 'expandStoreNum',
        key: 'expandStoreNum',
        align: 'center',
        width: 100,
        render: (info) => {
          return formatNumber(info)
        },
      },
      {
        title: (
          <div>
            <div>扩渗透</div>
            <div>需求量</div>
          </div>
        ),
        dataIndex: 'expandNum',
        key: 'expandNum',
        align: 'center',
        width: 100,
        render: (info) => {
          return formatNumber(info)
        },
      },
      {
        title: (
          <div>
            <div>意向返单</div>
            <div>需求量</div>
          </div>
        ),
        dataIndex: 'intentReorderNum',
        key: 'intentReorderNum',
        align: 'center',
        width: 100,
        render: (info) => {
          return formatNumber(info)
        },
      },
      {
        title: (
          <div>
            <div>意向返单</div>
            <div>吊牌额</div>
          </div>
        ),
        dataIndex: 'intentReorderListPrice',
        key: 'intentReorderListPrice',
        align: 'center',
        width: 100,
        render: (info) => {
          return formatNumber(info)
        },
      },
      {
        title: (
          <Tooltip
            placement="topLeft"
            title={
              <div>
                <div>本周已正式下单的sku数量之和</div>
              </div>
            }
          >
            <span style={{ marginRight: 3 }}>本周已出正式订单量</span>
            <QuestionCircleOutlined />
          </Tooltip>
        ),
        dataIndex: 'finishOrderNum',
        key: 'finishOrderNum',
        align: 'center',
        width: 100,
        render: (info) => {
          return formatNumber(info)
        },
      },
    ],
  },
  {
    title: '商品库存信息',
    align: 'center',
    children: [
      {
        title: (
          <div>
            <div>实际上市</div>
            <div>门店数</div>
          </div>
        ),
        dataIndex: 'onSaleShopNum',
        key: 'onSaleShopNum',
        align: 'center',
        width: 100,
        render: (info) => {
          return formatNumber(info)
        },
      },
      {
        title: (
          <div>
            <div>本周库存</div>
            <div>门店数</div>
          </div>
        ),
        dataIndex: 'inventoryShopNum',
        key: 'inventoryShopNum',
        align: 'center',
        width: 100,
        render: (info) => {
          return formatNumber(info)
        },
      },
      {
        title: (
          <div>
            <div>有销售</div>
            <div>门店数</div>
          </div>
        ),
        dataIndex: 'salesOutletsNum',
        key: 'salesOutletsNum',
        align: 'center',
        width: 100,
        render: (info) => {
          return formatNumber(info)
        },
      },
      {
        title: '总库存',
        dataIndex: 'inventoryNum',
        key: 'inventoryNum',
        align: 'center',
        width: 80,
        render: (info) => {
          return formatNumber(info)
        },
      },
      {
        title: '门店库存',
        dataIndex: 'shopInventoryNum',
        key: 'shopInventoryNum',
        align: 'center',
        width: 80,
        render: (info) => {
          return formatNumber(info)
        },
      },
      {
        title: '仓库库存',
        dataIndex: 'storeNum',
        key: 'storeNum',
        align: 'center',
        width: 80,
        render: (info) => {
          return formatNumber(info)
        },
      },
      {
        title: (
          <div>
            <div>仓库在途</div>
            <div>库存</div>
          </div>
        ),
        dataIndex: 'outstandingNum',
        key: 'outstandingNum',
        align: 'center',
        width: 80,
        render: (info) => {
          return formatNumber(info)
        },
      },
    ],
  },
  {
    title: '商品销售表现',
    align: 'center',
    children: [
      {
        title: '累计速率',
        dataIndex: 'cumulativeRate',
        key: 'cumulativeRate',
        align: 'center',
        width: 80,
        render: (info) => {
          return info || '-'
        },
      },
      {
        title: '当周速率',
        dataIndex: 'weekRate',
        key: 'weekRate',
        align: 'center',
        width: 80,
        render: (info) => {
          return info || '-'
        },
      },
      {
        title: '总周转',
        dataIndex: 'totalTurnover',
        key: 'totalTurnover',
        align: 'center',
        width: 80,
        render: (info) => {
          return info || '-'
        },
      },
      {
        title: (
          <div>
            <div>门店</div>
            <div>周转天</div>
          </div>
        ),
        dataIndex: 'shopTurnover',
        key: 'shopTurnover',
        align: 'center',
        width: 80,
        render: (info) => {
          return info || '-'
        },
      },
      {
        title: '累计销量',
        dataIndex: 'sumSaleNum',
        key: 'sumSaleNum',
        align: 'center',
        width: 80,
        render: (info) => {
          return formatNumber(info)
        },
      },
      {
        title: '销售占比',
        dataIndex: 'saleRate',
        key: 'saleRate',
        align: 'center',
        width: 80,
        render: (info) => {
          return info >= 0 && info != null ? mathjs.multiply(mathjs.bignumber(info || 0), 100).toString() + '%' : '-'
        },
      },
      {
        title: (
          <div>
            <div>累计</div>
            <div>销售额</div>
          </div>
        ),
        dataIndex: 'sumSalePrice',
        key: 'sumSalePrice',
        align: 'center',
        width: 100,
        render: (info) => {
          return formatNumber(info)
        },
      },
      {
        title: (
          <div>
            <div>累计销售</div>
            <div>吊牌额</div>
          </div>
        ),
        dataIndex: 'sumListPrice',
        key: 'sumListPrice',
        align: 'center',
        width: 100,
        render: (info) => {
          return formatNumber(info)
        },
      },
      {
        title: '累计毛利',
        dataIndex: 'sumProfit',
        key: 'sumProfit',
        align: 'center',
        width: 80,
        ellipsis: {
          showTitle: false,
        },
        render: (info) => {
          return info ? (
            <Tooltip placement="topLeft" title={formatNumber(info)}>
              {formatNumber(info)}
            </Tooltip>
          ) : (
            '-'
          )
        },
      },
      {
        title: (
          <div>
            <div>累计</div>
            <div>折扣率</div>
          </div>
        ),
        dataIndex: 'discountRate',
        key: 'discountRate',
        align: 'center',
        width: 80,
        render: (info) => {
          return info >= 0 && info != null ? mathjs.multiply(mathjs.bignumber(info || 0), 100).toString() + '%' : '-'
        },
      },
      {
        title: '售罄率',
        dataIndex: 'soldOutRate',
        key: 'soldOutRate',
        align: 'center',
        width: 80,
        render: (info) => {
          return info >= 0 && info != null ? mathjs.multiply(mathjs.bignumber(info || 0), 100).toString() + '%' : '-'
        },
      },
    ],
  },
]
